<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
          border-style: dashed; 虚线  solid 实线  dotted  点线 double   双实线
            一、margin外边距
            元素周围生成额外的空白区，“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

            二、padding内边距
            称呼为内边距，其判断的依据即边框离内容正文的距离。padding的用法 大体上来说，与margin略有不同，但是在距离设定上一致。
         
            position（定位）
            position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。
            其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。
            
            javascript 
            中未定的数据类型 Undefined    创建未定数值NanN 若创建未定义数值其值false  空类型Null 表示一个空值不是0
            
            isNaN() 函数可确定值是否为非数字（Not-a-Number）。
            如果该值等于 NaN，则此函数返回 true。否则返回 false。
            
            */
        #div {
            width: 300px;
            height: 200px;
            margin: 40px;
            border: 1;
            border-style: dashed;
            border-color: aquamarine;
            padding: 10px;
            float: left;
        }

        #div1 {
            width: 300px;
            height: 200px;
            margin: 40px;
            border: 1;
            border-style: dashed;
            border-color: rgb(164, 228, 139);
            padding: 10px;
            float: left;

        }

        #main {
            border: aqua solid 1px;
            position: relative;
            left: 50px;
            top: 50px;
        }

        #div2 {
            clear: left;
        }
    </style>
    <script>
        function zeDa01() {
            var rb = document.getElementById('inpu').value;
            if (isNaN(rb) && rb !== "") {
                alert("请输入有效数值")
            } else {
                alert('hello zeda' + rb);
            }
        }
        function zeDa02() {
            alert("zwDa02 onmouseover")
            document.bgColor = "blue"
        }
        document.write("document.writer")
        var date = new Date();
        document.write(date.getDate())
        document.write(date.getFullYear())
        var he = "hello";
        console.log("he " + he.length);
    </script>
</head>

<!-- 
        HTML <body> 标签的 alink 属性
        vlink 属性文档中已被访问链接的颜色。

        alink 属性规定文档中活动链接（active link）的的颜色。
        注释：当链接被点击时，该链接就处于活动状态
 -->
<!-- <body vlink="pink"> -->

<body alink="pink">
    <a href=" #">vvvv</a>
    <div id="main">
        <div id="div">ZED</div>
        <div id="div1">ZED1</div>
        <div id="div2"></div>
    </div>
    <button onclick="javascript:alert('hello');" value=""> 按钮</button>

    <audio src="" autoplay loop="loop"></audio>
    <video src="" autoplay loop="loop"></video>
    <form action="" method="get">
        Num:<input type="text" id="inpu">
        rest:
        <input type="reset" value="Reset" class="btn btn-default">

        <input type="button" onclick="zeDa01()" value="计算">
    </form>
    <a href="#" onmouseover="zeDa02()">onmouseover</a>
</body>

<!-- <script>
    var i = 1;
    var j;
     alert("i" + i);
    console.log(i == 1);
    console.log(i === 1);

</script> -->

</html>